<template>
  <div class="">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="(art, i) in list" :key="i" :title="art.title" />
    </van-list>
  </div>
</template>

<script>
import { search } from '@/api/search.js';

export default {
  name: 'search-result',
  props: {
    // 搜索关键字
    searchKey: {
      required: true,
      type: String,
    },
  },
  data() {
    return {
      list: [],
      page: 1, // 页码
      pageSize: 10, // 页容量
      loading: false, // List组件加载状态
      finished: false, // List组件彻底关闭触底加载
    };
  },
  methods: {
    // List组件的 load事件触发时机：
    //  1.初次加载时
    //  2.触底加载时
    async onLoad() {
      // 发送请求到服务器 ，获取 搜索文章结果 数据
      const { data: resBody } = await search(
        this.searchKey,
        this.page,
        this.pageSize
      );

      this.list.push(...resBody.data.results);

      // 页码+1
      this.page++;

      // 关闭加载状态
      this.loading = false;

      // 如果 返回数组的长度 < 页容量，则 不需要再触底请求了，因为都 加载光了
      if (resBody.data.results.length < this.pageSize) this.finished = true;
    },
  },
  created() {},
  computed: {},
  watch: {},
  components: {},
};
</script>

<style lang="less" scoped>
</style>
